import { useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
import './Header.css';

const Header = () => {
    const [isMenuOpen, setIsMenuOpen] = useState(false);
    const location = useLocation();

    const toggleMenu = () => {
        setIsMenuOpen(!isMenuOpen);
    };

    // 检查当前路径是否与导航项匹配
    const isActive = (path: string) => {
        if (path === '/' && location.pathname === '/') return true;
        return location.pathname.startsWith(path);
    };

    return (
        <header className="header">
            <div className="header-container">
                <div className="header-logo">
                    <Link to="/" className="logo-link">
                        <h1 className="header-title">React学习基地</h1>
                        <span className="header-subtitle">从基础到进阶</span>
                    </Link>
                </div>

                <button
                    className={`menu-toggle ${isMenuOpen ? 'active' : ''}`}
                    onClick={toggleMenu}
                    aria-label="切换菜单"
                >
                    <span className="bar"></span>
                    <span className="bar"></span>
                    <span className="bar"></span>
                </button>

                <nav className={`header-nav ${isMenuOpen ? 'active' : ''}`}>
                    <ul className="nav-list">
                        <li className="nav-item">
                            <Link to="/" className={`nav-link ${isActive('/') ? 'active' : ''}`}>首页</Link>
                        </li>
                        <li className="nav-item">
                            <Link to="/concepts" className={`nav-link ${isActive('/concepts') ? 'active' : ''}`}>核心概念</Link>
                        </li>
                        <li className="nav-item">
                            <Link to="/advanced" className={`nav-link ${isActive('/advanced') ? 'active' : ''}`}>进阶</Link>
                        </li>
                        <li className="nav-item">
                            <Link to="/about" className={`nav-link ${isActive('/about') ? 'active' : ''}`}>关于</Link>
                        </li>
                    </ul>
                </nav>
            </div>
        </header>
    );
};

export default Header;